<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<!-- iPhone, iPad and Android specific settings -->	
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1;">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		
		<title>{Adminica | The Professional Admin Theme</title>
		
		<!-- Create an icon and splash screen for iPhone and iPad -->
		<link rel="apple-touch-icon" href="images/iOS_icon.png">
		<link rel="apple-touch-startup-image" href="images/iOS_startup.png"> 

		<link rel="stylesheet" type="text/css" href="css/all.css" media="screen">
		
		<!-- Style Switcher -->
		<link rel="stylesheet" type="text/css" href="css/theme/switcher.css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/theme/switcher1.php?default=switcher.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/theme/switcher2.php?default=switcher.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/theme/switcher3.php?default=switcher.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/theme/switcher4.php?default=switcher.css" media="screen" />
		
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
			
		<!-- Load JQuery -->		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

		<!-- Load JQuery UI -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		
		<!-- Load Interface Plugins -->
		<script src="js/plugins.js"></script>
				
		<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.js"></script>
		<script type="text/javascript" src="js/quicksand/jquery.quicksand.js"></script>
		<script type="text/javascript" src="js/quicksand/custom_sorter.js"></script>
		<script type="text/javascript" src="js/quicksand/dash_sorter.js"></script>
		<script type="text/javascript" src="js/quicksand/jquery-css-transform.js"></script>
		<script type="text/javascript" src="js/quicksand/jquery-animate-css-rotate-scale.js"></script>
		<script type="text/javascript" src="js/tinyeditor/tinyeditor.js"></script>
		<script type="text/javascript" src="js/jqueryFileTree/jqueryFileTree.js"></script>
		<script type="text/javascript" src="js/DataTables/jquery.dataTables.js"></script>
		<script type="text/javascript" src="js/slidernav/slidernav.js"></script>
		

		<!-- This file configures the various jQuery plugins for Adminica. Contains links to help pages for each plugin. -->
		<script type="text/javascript" src="js/adminica/adminica_ui.js"></script>
		
	</head>
	<body>
		<div id="wrapper">
			<div id="topbar" class="clearfix">
				<a href="index.html" class="logo"><span>Adminica Pro II</span></a>
				<div class="user_box round_all">
					<img src="images/profile.jpg" width="55" alt="Profile Pic" />
					<h2>Administrator</h2>
					<h3><a class="text_shadow" href="#">John Smith</a></h3>
					<ul>
						<li><a href="#">profile</a><span class="divider">|</span></li>
						<li><a href="#">settings</a><span class="divider">|</span></li>
						<li><a href="login.html">logout</a></li>
					</ul>
				</div><!-- #user_box -->	
			</div><!-- #topbar -->		
		
			<div id="sidebar">
				<a href="index.html" class="logo"><span>Adminica Pro II</span></a>
				<div class="user_box round_all clearfix">
					<img src="images/profile.jpg" width="55" alt="Profile Pic" />
					<h2>Administrator</h2>
					<h3><a class="text_shadow" href="#">John Smith</a></h3>
					<ul>
						<li><a href="#">settings</a><span class="divider">|</span></li>
						<li><a href="login.html">logout</a></li>
					</ul>
				</div><!-- #user_box -->

				<ul id="accordion">
					<li><a href="index.html" class="top_level"><img src="images/icons/small/grey/home.png"/>Home</a>
						<ul class="drawer">
							<li><a href="#">Activity</a></li>
							<li><a href="#">Events</a></li>
							<li><a href="#">Tasks</a></li>
						</ul>
					</li>
					<li><a href="#" class="top_level"><img src="images/icons/small/grey/mail.png"/>Mailbox</a>
						<ul class="drawer">
							<li><a href="#">Inbox</a></li>
							<li><a href="#">Sent Items</a></li>
							<li><a href="#">Drafts</a></li>
							<li><a href="#">Trash</a></li>
						</ul>
					</li>
					<li><a href="#" class="top_level"><img src="images/icons/small/grey/documents.png"/>Documents</a>
						<ul class="drawer">
							<li><a href="#">Create New</a></li>
							<li><a href="#">View All</a></li>
							<li><a href="#">Upload/Download</a></li>
						</ul>
					</li>
					<li><a href="#" class="top_level"><img src="images/icons/small/grey/users.png"/>Members</a>
						<ul class="drawer">
							<li><a href="#">Add New</a></li>
							<li><a href="#">Edit/Delete</a></li>
							<li><a href="#">Search Profiles</a></li>
						</ul>
					</li>
					<li><a href="#" class="top_level"><img src="images/icons/small/grey/graph.png"/>Statistics</a></li>
					<li><a href="#" class="top_level"><img src="images/icons/small/grey/cog%202.png"/>Settings</a>
						<ul class="drawer">
							<li><a href="#">Account</a></li>
							<li><a href="#">System</a></li>
						</ul>
					</li>
				</ul>
				<form id="search_side"><input class="round_all" type="text" value="Search..." onClick="value=''"></form>
				<ul id="side_links" class="text_shadow" >
					<li><a href="http://www.tricycle.ie/adminica/index.php/docs/">Online Documentation</a>
					<li><a href="#">Expert Forum</a></li>
					<li><a href="#">Product Wiki</a></li>
					<li><a href="#">Latest Company News</a></li>
				</ul>
			</div><!-- #sidebar -->

		<div id="main_container" class="main_container container_16 clearfix">
			
			<div id="nav_top" class="clearfix  round_top">
				<ul class="clearfix">
					<li class="current"><a href="dashboard.html"><img src="images/icons/small/white/laptop.png"/>Dashboard</a></li>

					<li><a href="#"><img src="images/icons/small/grey/frames.png"/>Layout</a>
						<ul class="dropdown">
							<li><a href="layout.html">16 Grid - 960.gs</a></li>
							<li><a href="text.html">Text & Typography</a></li>
							<li><a class="has_slide" href="#">Layout Width</a>
								<ul class="slideout">						
									<li><a href="page_fixed.html">Fixed</a></li>
									<li><a href="page_fluid.html">Fluid</a></li>
								</ul>
							</li>
							<li><a class="has_slide" href="#">Layout Position</a>
								<ul class="slideout">
									<li><a href="page_side.html">Side</a></li>
									<li><a href="page_full">Top</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#"><img src="images/icons/small/grey/coverflow.png"/>Boxes</a>
						<ul class="dropdown">
							<li><a class="has_slide" href="#">Tab Boxes</a>
								<ul class="slideout">
									<li><a href="tabs.html">Horizontal Tabs</a></li>
									<li><a href="tabs.html">Vertical Tabs</a></li>
								</ul>
							</li>
							<li><a href="accordions.html">Accordions Boxes</a></li>
							<li><a href="code.html">Code View</a></li>
						</ul>
					</li>	
					<li><a href="#"><img src="images/icons/small/grey/create%20write.png"/>Forms</a>
						<ul class="dropdown dropdown_right">
							<li><a href="forms.html">Input Fields & Validation</a>
							</li>
							<li><a class="has_slide" href="#">Date</a>
								<ul class="slideout">
									<li><a href="forms.html">Date Field</a></li>
									<li><a href="forms.html">Inline Picker</a></li>
								</ul>
							</li>
							<li><a class="has_slide" href="#">Sliders</a>
								<ul class="slideout">
									<li><a href="forms.html">Horizontal Slider</a></li>
									<li><a href="forms.html">Vertical Slider</a></li>
									<li><a href="forms.html">Range Slider</a></li>
									<li><a href="forms.html">Progress Bar</a></li>
								</ul>
							</li>
							<li><a href="buttons.html">Buttons</a></li>
							<li><a href="editor.html">WYSIWYG Editor</a></li>
						</ul>
					</li>		
					<li><a href="#"><img src="images/icons/small/grey/images.png"/>Gallery</a>
						<ul class="dropdown dropdown_right">
							<li><a href="gallery.html">Fancybox Gallery</a></li>
							<li><a href="gallery_sortable.html">Sortable Gallery</a></li>
						</ul>
					</li>			
					<li><a href="tables.html"><img src="images/icons/small/grey/blocks%20images.png"/>Tables</a></li>
					<li><a href="files.html"><img src="images/icons/small/grey/Folder.png"/>Files</a></li>
					<li><a href="contacts.html"><img src="images/icons/small/grey/Users.png"/>Contacts</a></li>
					<li><a href="login.html"><img src="images/icons/small/grey/Locked%202.png"/>Login</a></li>
				</ul>	
			</div><!-- #nav_top -->
			
			<div class="flat_area grid_16">
				<h2>Accordion Controls <small>(<strong>note:</strong> these will not play music)</small></h2>
				<p>Below is a standard accordion control placed inside a regular box. It can be <strong>dragged</strong> and <strong>dropped</strong> and <strong>toggled</strong> like any other box. Click on the accordion bars to open and close it. </p>
				
				<p><strong>Bonus feature</strong>, you can rearrange the bars by grabbing the dotted area to the right of the bar. <strong>Go ahead and try it out</strong>.</p>
			</div>
			<div class="box grid_16">
				<h2 class="box_head grad_colour">Accordion with Heading</h2>
				<a href="#" class="grabber">&nbsp;</a>
				<a href="#" class="toggle">&nbsp;</a>
				<div class="toggle_container">
					<ul class="block content_accordion">
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">First Heading</h3>
							<div class="content">
								<h1>Primary Heading</h1>
								<p>Lorem Ipsum is simply dummy text of the <a href="#" title="This is a tooltip">printing industry</a>. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
			
								<h2>Secondary Heading</h2>
								<p>Lorem Ipsum is simply dummy text of the printing industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 				
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Second Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Third Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Fourth Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="flat_area grid_16">
				<p>The next accordions don't have headers. This can sometimes be a cleaner, <strong>more simple way to present information.</strong> This type of accordion cannot be dragged (at the moment anyway) but its bars can still be rearranged. </p>
			</div>
			<div class="box grid_8 round_all">
				<ul class="block content_accordion no_header">
					<li>
						<a href="#" class="handle">&nbsp;</a>
						<h3 class="bar">First Heading</h3>
						<div class="content">
							<p>Content goes here</p> 
						</div>
					</li>
					<li>
						<a href="#" class="handle">&nbsp;</a>
						<h3 class="bar">Second Heading</h3>
						<div class="content">
							<p>Content goes here</p>
						</div>
					</li>
					<li>
						<a href="#" class="handle">&nbsp;</a>
						<h3 class="bar">Third Heading</h3>
						<div class="content">
							<p>Content goes here</p>
						</div>
					</li>
					<li>
						<a href="#" class="handle">&nbsp;</a>
						<h3 class="bar">Fourth Heading</h3>
						<div class="content">
							<p>Content goes here</p>
						</div>
					</li>
				</ul>
			</div>		
				<div class="box grid_8 round_all">
					<ul class="block content_accordion no_header">
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">First Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Second Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Third Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Fourth Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="flat_area grid_16">
					<p><strong>Note:</strong> Like nearly all Adminica layout objects, the accordion's width can be controlled using the <strong>960.gs</strong> grid system, eg. to make a full width accordion you would give the box it is contained in a <strong>class="grid_16"</strong>.</p>
				</div>
			</div>		
			<div class="main_container container_16 clearfix fullsize">
				<div class="box grid_16 round_all">
					<ul class="block content_accordion no_header">
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">First Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Second Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Third Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
						<li>
							<a href="#" class="handle">&nbsp;</a>
							<h3 class="bar">Fourth Heading</h3>
							<div class="content">
								<p>Content goes here</p>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div id="template_options" class="clearfix">
				<h3><img src="images/adminica.png" alt="Adminica"></h3>
				<div class="layout_size round_all">
					<label>Layout:</label>
					<a href="css/theme/switcher1.php?style=switcher.css">Fluid</a><span>|</span>
					<a href="css/theme/switcher1.php?style=../layout_fixed.css">Fixed</a><span>
				</div>
				<div class="layout_position round_all">
					<label>Header: </label>
					<a href="css/theme/switcher2.php?style=switcher.css">Side</a><span>|</span>
					<a href="css/theme/switcher2.php?style=../header_top.css">Top</a><span>|</span>
					<a href="css/theme/switcher2.php?style=../header_slideout.css">Slide</a>
				</div>
				<div class="theme_colour round_all">
					<label>Colour:</label>
					<a class="black" href="css/theme/switcher3.php?style=switcher.css"><span>Black</span></a>
					<a class="blue" href="css/theme/switcher3.php?style=theme_blue.css"><span>Blue</span></a>
					<a class="navy" href="css/theme/switcher3.php?style=theme_navy.css"><span>Navy</span></a>
					<a class="red" href="css/theme/switcher3.php?style=theme_red.css"><span>Red</span></a>
					<a class="green" href="css/theme/switcher3.php?style=theme_green.css"><span>Green</span></a>
					<a class="magenta" href="css/theme/switcher3.php?style=theme_magenta.css"><span>Magenta</span></a>
					<a class="orange" href="css/theme/switcher3.php?style=theme_brown.css"><span>Brown</span></a>
				</div>
				<div class="theme_background round_all">
					<label>Background:</label>
					<a href="css/theme/switcher4.php?style=switcher.css">Boxes</a><span>|</span>
					<a href="css/theme/switcher4.php?style=bg_punched.css">Punched</a><span>|</span>
					<a href="css/theme/switcher4.php?style=bg_honeycomb.css">Honeycomb</a><span>|</span>
					<a href="css/theme/switcher4.php?style=bg_wood.css">Wood</a><span>|</span>
					<a href="css/theme/switcher4.php?style=bg_dark_wood.css">Timber</a><span>|</span>
					<a href="css/theme/switcher4.php?style=bg_noise.css">Noise</a>
				</div>
			</div>
		</body>
	</html>